<template>
  <div>
    <el-card class="box-card">
      <el-form
        ref="selectform"
        :inline="true"
        :model="selectform"
        class="demo-form-inline ManagementClass"
      >
        <el-form-item prop="userName" label="用户名">
          <el-input
            v-model="selectform.userName"
            placeholder="请输入用户名"
            prefix-icon="el-icon-search"
            class="AuthorityInput managementBtn"
          />
        </el-form-item>
        <el-form-item prop="phone" label="手机号">
          <el-input
            v-model="selectform.phone"
            placeholder="请输入手机"
            prefix-icon="el-icon-search"
            class="AuthorityInput managementBtn"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="selectSubmit('selectform')">查询</el-button>
          <el-button type="info" @click="selectResetForm('selectform')">重置</el-button>
          <el-button type="success" @click="AddSubmitDialog">新增</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="box-card" style="margin-top:6px">
      <el-table
        v-loading="loading"
        :data="tableData"
        size="medium"
        stripe
        style="width: 100%">
        <el-table-column
          show-overflow-tooltip
          prop="index"
          label="序号"/>
        <el-table-column
          show-overflow-tooltip
          prop="loginName"
          label="用户名"/>
        <el-table-column
          show-overflow-tooltip
          prop="userName"
          label="姓名"/>
        <el-table-column
          show-overflow-tooltip
          prop="aliasName"
          label="别名"/>
        <el-table-column
          show-overflow-tooltip
          prop="phone"
          label="手机"/>
        <el-table-column
          prop="roles"
          label="角色"
          width="110">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.roles == 1 ? 'success' : scope.row.roles == 2 ? 'danger' : 'primary'"
              disable-transitions>{{ scope.row.roles == 1 ? "管理员" : scope.row.roles == 2 ? "超级管理员" : "普通用户" }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="email"
          label="邮箱"/>
        <el-table-column
          prop="status"
          label="状态">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.status == 1 ? 'success' : scope.row.status == 0 ? 'danger' : 'primary'"
              disable-transitions>{{ scope.row.status == 1 ? "启用" : scope.row.status == 0 ? "禁用" : "" }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="createTimeString"
          label="创建时间"/>
        <el-table-column
          show-overflow-tooltip
          prop="updateTimeString"
          label="更新时间"/>
        <el-table-column label="操作" width="220">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" circle @click="handleEdit(scope.$index, scope.row)"/>
            <el-button type="danger" icon="el-icon-delete" circle @click="deleteBtn(scope.$index, scope.row)"/>
            <el-button :icon="scope.row.status == 0 ? 'el-icon-check' : scope.row.status == 1 ? 'el-icon-close' : ''" type="warning" circle @click="UpDown(scope.$index, scope.row)"/>
            <el-button type="danger" icon="el-icon-setting" circle @click="resetPassword(scope.$index, scope.row)"/>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <pagination :pager="pager" @search="search"/>

    <el-dialog :visible.sync="Addvisble" :close-on-click-modal="false" :lock-scroll="false" :title="modalTitle" width="320px" center>
      <el-form
        ref="AddValidateForm"
        :model="AddValidateForm"
        :rules="AddRules"
        class="demo-ruleForm AddvisbleClass"
      >
        <el-form-item label="用户名:" prop="loginName">
          <el-input v-model="AddValidateForm.loginName" type="text" maxlength="20"/>
        </el-form-item>
        <el-form-item label="联系方式:" prop="phone">
          <el-input v-model="AddValidateForm.phone" type="text"/>
        </el-form-item>
        <el-form-item label="姓名:" prop="userName">
          <el-input v-model="AddValidateForm.userName" type="text" maxlength="20"/>
        </el-form-item>
        <el-form-item label="别名:" prop="aliasName">
          <el-input v-model="AddValidateForm.aliasName" type="text"/>
        </el-form-item>
        <el-form-item label="邮箱地址:" prop="email">
          <el-input v-model="AddValidateForm.email" type="text"/>
        </el-form-item>
        <el-form-item v-show="rolesID != 2" label="角色:" prop="roles">
          <el-radio-group v-model="AddValidateForm.roles">
            <el-radio label="0">普通人员</el-radio>
            <el-radio label="1">管理员</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="AddsubmitForm('AddValidateForm')">提交</el-button>
          <el-button @click="Addvisble = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<style scoped>

</style>

<script>
import { queryOneAll, addUser, upUser, deteleUser, updateStatus, resetPassword } from '@/api/AuthorityManagement/index'

import pagination from '@/components/pagination/index'
export default {
  components: {
    pagination
  },
  data() {
    return {
      pager: {
        pageSize: 10,
        currentPage: 1,
        totalPage: 0
      },
      tableData: [],
      selectform: {
        userName: '',
        phone: ''
      },
      loading: false,
      Addvisble: false,
      AddValidateForm: {
        loginName: '',
        aliasName: '',
        email: '',
        roles: '',
        userName: '',
        phone: ''
      },
      AddRules: {
        loginName: [
          {
            required: true,
            message: '请输入用户姓名',
            trigger: 'blur'
          },
          { pattern: /^[0-9A-Za-z]{8,30}$/, message: '请输入8至30位字符' }
        ],
        userName: [
          {
            required: true,
            message: '请输入姓名',
            trigger: 'blur'
          }
        ],
        phone: [
          { pattern: /^[0-9]{11,11}$/, message: '请输入11位的手机号码', trigger: 'change' }
        ]

      },
      modalTitle: '',
      roles: window.sessionStorage.getItem('roles'),
      rolesID: ''
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    search() {
      this.getInfo()
    },
    getInfo() {
      this.loading = true
      queryOneAll(this.parameter()).then(res => {
        res.data.rows.forEach((item, index) => {
          item.index = index + 1 + (this.pager.currentPage - 1) * this.pager.pageSize
          return item
        }
        )
        this.tableData = res.data.rows
        this.pager.totalPage = res.data.total
        this.loading = false
      })
    },
    parameter() {
      const obj = {
        current: this.pager.currentPage,
        size: this.pager.pageSize,
        keywordOne: this.selectform.userName,
        keywordTwo: this.selectform.phone
      } // 默认列表字段数据
      return obj
    },
    // 搜索
    selectSubmit(formName) {
      this.pager.currentPage = 1
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.getInfo()
        } else {
          return false
        }
      })
    },
    // 搜索重置
    selectResetForm(formName) {
      this.pager.currentPage = 1
      this.$refs[formName].resetFields()
      this.getInfo()
    },
    // 新增弹框
    AddSubmitDialog() {
      this.Addvisble = true
      this.modalTitle = '新增'
      this.rolesID = ''
      this.$nextTick(() => {
        this.$refs.AddValidateForm.resetFields()
        for (var key in this.AddValidateForm) {
          if (this.AddValidateForm.hasOwnProperty(key)) {
            this.AddValidateForm[key] = ''
          }
        }
        this.AddValidateForm.roles = '0'
      })
    },
    AddsubmitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.modalTitle === '新增') {
            addUser(this.AddValidateForm).then(res => {
              this.pager.currentPage = 1
              this.$refs[formName].resetFields('AddValidateForm')
              this.Addvisble = false
              this.$message({
                message: res.data,
                type: 'success'
              })
              this.getInfo()
            })
          }
          if (this.modalTitle === '编辑') {
            upUser(this.AddValidateForm).then(res => {
              this.$refs[formName].resetFields('AddValidateForm')
              this.Addvisble = false
              this.$message({
                message: res.data,
                type: 'success'
              })
              this.getInfo()
            })
          }
        } else {
          return false
        }
      })
    },
    // 编辑
    handleEdit(index, row) {
      this.Addvisble = true
      this.modalTitle = '编辑'
      this.$nextTick(() => {
        this.$refs.AddValidateForm.resetFields()
        this.rolesID = row.roles
        this.AddValidateForm.id = row.id
        this.AddValidateForm.loginName = row.loginName
        this.AddValidateForm.aliasName = row.aliasName
        this.AddValidateForm.email = row.email
        this.AddValidateForm.roles = row.roles
        this.AddValidateForm.userName = row.userName
        this.AddValidateForm.phone = row.phone
      })
    },
    // 删除
    deleteBtn(index, row) {
      this.$confirm('您确定要删除吗?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deteleUser(row.id).then(res => {
            this.getInfo()
            this.$message({
              message: res.data,
              type: 'success'
            })
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 禁用启用
    UpDown(index, row) {
      const mes = row.status == 1 ? '禁用' : row.status == 0 ? '启用' : ''
      const title = row.status == 1 ? 0 : row.status == 0 ? 1 : ''
      const obj = {
        id: row.id,
        status: title
      }
      this.$confirm(`您确定要${mes}吗?`, '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          updateStatus(obj).then(res => {
            this.getInfo()
            this.$message({
              message: `${mes}成功`,
              type: 'success'
            })
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 重置密码
    resetPassword(index, row) {
      this.$prompt('密码', '修改密码', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPlaceholder: '请输入密码',
        inputPattern: /^[0-9A-Za-z]{8,30}$/,
        inputErrorMessage: '请输入8至30位字符'
      }).then(({ value }) => {
        const obj = {
          id: row.id,
          password: value
        }
        resetPassword(obj).then(res => {
          this.$message({
            type: 'success',
            message: '修改成功'
          })
          this.getInfo()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消修改'
        })
      })
    }
  }
}
</script>
